<template>
	<div class="section section-base page_10">
		<div class="flex-start font30" style="padding-top: 20px;">
			<count-to class="aaa" :startVal="0" :endVal="detailData.examCount" :duration="3000"></count-to>
			<div>次</div>
		</div>
		<div class="font16" id="studyDes">
			全年共发布考试{{detailData.examCount}}次，
			累积考试{{detailData.personCount}}人次，
			平均合格率为{{detailData.avgPercent}}%
		</div>
		<!-- <div class="flex-start font30">
			<count-to class="aaa" :startVal="0" :endVal="detailData.examCount" :duration="3000"></count-to>
			<div></div>
		</div> -->
		<div class="font16" id="studyTimeDes">
			{{new Date(reportData.startDate).getFullYear()}}年员工共学习{{detailData.studyCount}}，超过了{{detailData.percent}}%伙伴单位
		</div>
		<animation-text :text="animationText"></animation-text>
		<div class="text-r" style="padding-top: 20px;">
			<img v-if="active" :class="{ 'animate__zoomIn':active }" class="animate__animated" src="/ilink-app-h5-zd/static/img/ilink_1577975146434.png" alt="" style="width: 85%;" id="page_10_bg">
		</div>
	</div>
</template>

<script>
export default {
	components: {},
	props: {
		reportData: {
			type: Object,
			default: function () {
				return {
					joinTime: {},
				}
			},
		},
		active: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			detailData: {
				examCount: 0,
				studyCount: 0,
			},
			animationText: '',
		}
	},
	watch: {
		active(val) {
			if (val) {
				this.$nextTick(() => {
					this.init()
				})
			}
		},
	},
	methods: {
		init() {
			this.detailData = this.reportData.study
			this.animationText = '好好学习，认真工作；守卫安全，快乐生活！'
		},
	},
	mounted() {},
}
</script>